import React, { memo } from 'react';
import {
  Box,
  Grid,
  Stack,
  Typography,
  CardContent,
  Avatar,
} from '@material-ui/core';
import { VenderBox } from '@/systems';
import { Infos } from '@/pages/dashboard';

export const RenderCards: React.FC<{ tab: number; infos: Infos[] }> = memo(
  ({ tab, infos }) => {
    return (
      <Box sx={{ flexGrow: 1 }}>
        <Grid container spacing={5}>
          {infos?.map((ret, index) => (
            <Grid item xs={3} key={index}>
              <VenderBox>
                <CardContent>
                  <Stack direction={'row'} justifyContent={'space-between'}>
                    <div>
                      <Typography
                        variant={'body1'}
                        sx={{
                          pb: 2,
                        }}
                      >
                        {ret.title}
                      </Typography>
                      <Typography variant={'h5'}>
                        <Stack direction={'row'} alignItems={'baseline'}>
                          <Typography
                            variant={'body1'}
                            sx={{
                              color: 'text.primary',
                              fontWeight: 'medium',
                            }}
                          >
                            {ret.count}
                          </Typography>
                          <Typography
                            variant={'caption'}
                            sx={{
                              ml: 1,
                              color: 'warning.main',
                            }}
                          >
                            {ret.unit}
                          </Typography>
                        </Stack>
                      </Typography>
                    </div>
                    <div>
                      <Avatar src={ret.iconUrl} />
                    </div>
                  </Stack>
                </CardContent>
              </VenderBox>
            </Grid>
          ))}
        </Grid>
      </Box>
    );
  },
  (prevProps, nextProps) => {
    return false;
  },
);
